<template>
  <el-table
    v-loading.body = 'loading'
    :data="tableData"
    border
    style="width: 100%;">
    <el-table-column
      align="center"
      prop="id"
      label="编号"
      width="95">
    </el-table-column>
    <el-table-column
      align="center"
      prop="title"
      label="标题">
    </el-table-column>
    <el-table-column
      align="center"
      prop="author"
      label="作者"
      width="110">
    </el-table-column>
    <el-table-column
      align="center"
      prop="status"
      label="状态"
      width="110">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.status | status"
          close-transition>{{scope.row.status}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      align="center"
      prop="display_time"
      label="时间"
      width="200">
      <template slot-scope="scope">
        <svg-icon iconClass="clock"></svg-icon>&nbsp;{{scope.row.display_time}}
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  import * as api from '@/api'
  import SvgIcon from "../../components/SvgIcon/index.vue";
  export default {
    name: 'table_view',
    components:{
      SvgIcon
    },
    data () {
      return {
        tableData: [],
        loading: true
      }
    },
    activated: function () {
      this.fetchData()
    },
    created: function(){
      console.log(`create component table_view`)
    },
    methods: {
      fetchData: function () {
        let vm = this
        vm.loading = true
        api.getTableList()
          .then((data)=>{
            vm.loading = false
            vm.tableData = data.items
          })
          .catch(error=>{
            console.log(`table>fetchData>${error}`)
            vm.loading = false
          })
      }
    },
    filters: {
      status: function (value) {
        const statusMap = {
          published: 'success',
              draft: 'info',
            deleted: 'warning'
        }
        return statusMap[value]
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

</style>
